import {useEffect, useState} from 'react';
import {getPageImg} from "@/services/pageImg";
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {Row, Col, Image, Space, Button} from 'antd';
import Modify from "@/pages/system/PageImg/extra/modify";
import styles from './index.less';
import {authority} from "@/tools/tool";
import {useModel, Access} from 'umi'
import leftTop from '@/assets/1.png';
import title from '@/assets/title.png';

const Index = () => {
  const init = useModel('@@initialState');
  const {currentUser} = init.initialState
  const [visible, setVisible] = useState(false)
  const [num, setNum] = useState(0)
  const [img1, setImg1] = useState('')
  const [img2, setImg2] = useState('')
  const [text1, setText1] = useState('')
  const error = ""
  useEffect(() => {
    // @ts-ignore
    getPageImg().then((res) => {
      if (res.status === 200 && res.data.length !== 0) {
        setImg1(res.data.filter((q: { [x: string]: string; }) => q['name_id'] == '1')[0]['img'])
        setImg2(res.data.filter((q: { [x: string]: string; }) => q['name_id'] == '2')[0]['img'])
        setText1(res.data.filter((q: { [x: string]: string; }) => q['name_id'] == '3')[0]['text'])
        sessionStorage.setItem('登录logo', res.data.filter((q: { [x: string]: string; }) => q['name_id'] == '1')[0]['img'])
        sessionStorage.setItem('左上方logo', res.data.filter((q: { [x: string]: string; }) => q['name_id'] == '2')[0]['img'])
        sessionStorage.setItem('左上方文字', res.data.filter((q: { [x: string]: string; }) => q['name_id'] == '3')[0]['text'])
      }else if (res.status === 200) {
        setImg1(title)
        setImg2(leftTop)
        setText1('计费运维平台')
      }
    })
  }, [visible])
  return (
    <PageHeaderWrapper>
      <div style={{
        width: '50%',
        height: '40rem',
        margin: '0 auto',
        backgroundColor: 'white',
        // textAlign: 'center'
      }}>
        <div style={{fontWeight: '700', fontSize: '1.4rem', padding: '10px'}}>系统文字样式修改</div>
        <div style={{width: '80%', margin: '0 auto', paddingTop: '5vh'}}>
          <div style={{marginBottom: '5vh',}} className={styles.divdf}>
            <div style={{fontWeight: '500', fontSize: '1.2rem'}}>登录logo</div>
            <Image width={'20%'} src={img1} fallback={error}/>
            <Access key={'1'} accessible={authority('45', currentUser.operation)}>
              <Button
                onClick={() => {
                  setVisible(true)
                  setNum(1)
                }}>修改</Button>
            </Access>
          </div>
          <div style={{marginBottom: '5vh',}} className={styles.divdf}>
            <div style={{fontWeight: '500', fontSize: '1.2rem'}}>左上方logo</div>
            <Image width={'20%'} src={img2} fallback={error}/>
            <Access key={'1'} accessible={authority('45', currentUser.operation)}>
              <Button
                onClick={() => {
                  setVisible(true)
                  setNum(2)
                }}>修改</Button>
            </Access>
          </div>
          <div style={{padding: '10px'}} className={styles.divdf}>
            <div style={{fontWeight: '500', fontSize: '1.2rem'}}>左上方文字</div>
            <div style={{fontWeight: '700', fontSize: '1.5rem',width:'30%', textAlign:'center'}}>{text1}</div>
            <Access key={'1'} accessible={authority('45', currentUser.operation)}>
              <Button
                onClick={() => {
                  setVisible(true)
                  setNum(3)
                }}>修改</Button>
            </Access>
          </div>
        </div>
      </div>
      <Modify
        visible={visible}
        data={num}
        onClose={() => {
          setVisible(false);

        }}
        onOk={() => {
          setVisible(false);
        }}/>

    </PageHeaderWrapper>
  );
};

export default Index;
